<template>
  <div class="d-flex flex-wrap flex-column">
    <div class="d-flex mt-2">
      <div class="py-2 px-0">医院:</div>
      <div class="d-flex flex-wrap ml-2">
        <span class="border--primary pa-2 d-inline-flex rounded-lg"
          >复旦大学附属华山医院</span
        >
      </div>
    </div>
    <div class="d-flex mt-2">
      <div class="py-2 px-0">科室:</div>
      <div class="d-flex flex-wrap ml-2">
        <span class="border--primary pa-2 d-inline-flex rounded-lg"
          >皮肤科</span
        >
      </div>
    </div>
    <div class="d-flex mt-2 flex-wrap justify-start align-center">
      <div class="py-2 px-0">排班:</div>
      <div
        class="d-flex flex-wrap ml-2 my-2"
        v-for="(arrange, index) in arranges"
        :key="index"
      >
        <v-hover v-slot="{ hover }">
          <v-sheet
            class="rounded-circle d-flex justify-center align-center flex-column ml-2 p-relative boder"
            width="50"
            height="50"
            :elevation="hover && arrange.registration ? 4 : 0"
            :color="
              hover && arrange.registration
                ? 'thirdary'
                : arrange.registration
                ? 'primary'
                : 'grey'
            "
            :class="{
              'cur-point': arrange.registration,
              'primary--text': hover && arrange.registration,
              ' fontwhite--text': !hover && arrange.registration,
            }"
          >
            <div class="text-caption">{{ arrange.date }}</div>
            <div class="text-caption">{{ arrange.day }}</div>
            <v-sheet
              :elevation="hover && arrange.registration ? 4 : 0"
              :color="
                hover && arrange.registration
                  ? 'thirdary'
                  : arrange.registration
                  ? 'primary'
                  : 'grey'
              "
              :class="{
                'cur-point': arrange.registration,
                'primary--text': hover && arrange.registration,
                ' fontwhite--text': !hover && arrange.registration,
              }"
              class="p-absolute text-caption right bottom mr-n3 rounded-circle d-flex justify-center align-center boder"
              height="20"
              width="20"
              ><span>{{ arrange.moment }} </span>
            </v-sheet>
          </v-sheet>
        </v-hover>
      </div>
    </div>
  </div>
</template>



<script>
import {mapState} from "vuex";
import arranges from "./data/arranges.js"
export default {
  data() {
    return {
      arranges,
    };
  },
  computed: {
    ...mapState[["theme"]],
  },
};
</script>



<style lang="scss" scoped>
.boder {
  border: 2px solid grey;
}
</style>
